<template>
  <yy-paging v-model="dataList" @query="queryList" ref="paging" :auto="true" @scroll="scroll" :refresher-enabled="true">
    <template #top>
      <u-navbar
        :is-back="false"
        :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
        <view class="grid grid-cols-3 items-center px-3 w-full">
          <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
            <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
          </view>
          <view class="line-clamp-1 flex col-span-1 justify-center">
            <view class="text-[#000] font-bold text-base"> 明细 </view>
          </view>
          <view class="flex col-span-1 justify-end">
            <view class="text-[14px] text-[#5C6068]"> </view>
          </view>
        </view>
      </u-navbar>
      <view class="p-4">
        <view class="flex gap-2 items-center">
          <view class="bg-[#FFFFFF] rounded-[1.125rem] px-7 py-1" v-for="(i, k) in list" :key="k" @click="changeTab(k)">
            <view class="text-[.75rem] text-[#161A24]" :class="active == k ? 'font-bold' : ''"> {{ i }} </view>
          </view>
        </view>
      </view>
    </template>
    <!--  -->
    <template #empty>
      <yy-empty text="还没有收支记录"></yy-empty>
    </template>
    <template #loadingMoreNoMore>
      <yy-nomore></yy-nomore>
    </template>
    <view class="flex flex-col px-4" v-for="(item, k) in dataList" :key="k">
      <view class="flex justify-between items-center py-2">
        <view class="text-[.9375rem] text-[#161A24] font-bold"> {{ item.join_date }} </view>
        <view class="flex gap-1 items-center">
          <view class="text-[.6875rem] text-[#8E9299]" v-if="active == 1 || active == 0">
            {{ item.inc_amount_txt }}
          </view>
          <view class="text-[.6875rem] text-[#8E9299]" v-if="active == 2 || active == 0">
            {{ item.dec_amount_txt }}
          </view>
        </view>
      </view>

      <u-line />

      <view class="py-3">
        <view class="flex justify-between items-center py-2" v-for="(ii, kk) in item.details" :key="kk">
          <view class="flex flex-col gap-1">
            <view class="text-[.875rem] text-[#161A24] line-clamp-1">{{ ii.description }} </view>
            <view class="text-[.75rem] text-[#5C6068]">{{ ii.create_time }}</view>
          </view>
          <!-- method-->
          <view class="text-[.875rem] text-[#FF9A07] font-bold flex-none" v-if="ii.method == 1">
            +{{ ii.amount }}
          </view>
          <view class="text-[.875rem] text-[#161A24] font-bold flex-none" v-if="ii.method == 2">
            -{{ ii.amount }}
          </view>
          <view class="text-[.875rem] text-[#161A24] flex-none" v-if="ii.method == 3">{{ ii.amount }}</view>
        </view>
      </view>
    </view>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        automatic: false, // 是否自动
        list: ['全部', '收入', '支出'], // tab列表
        active: 0 // 当前选中的tab索引
      }
    },

    methods: {
      changeTab(k) {
        vk.pubfn.debounce(() => {
          vk.showLoading('加载中...')
          this.active = k
          this.$refs.paging.reload()
        }, 500)
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        let code = ['all', 'all_inc', 'all_dec'][this.active]
        let res = await api.withdrawalList({
          code,
          type: 1
        })

        let detailData = await api.detailList({
          date: res?.data?.list?.[0]?.join_date ?? '',
          scenes: code,
          page,
          limit,
          type: 1
        })

        if (res?.data?.list && detailData?.data) {
          res.data.list = res.data.list.map(item => {
            const details = detailData.data.filter(detail => detail.dates === item.join_date)
            return {
              ...item,
              details: details || []
            }
          })
        }
        console.log('res==> ', res.data.list)
        vk.hideLoading()
        this.$refs.paging.setLocalPaging(res.data.list)
      }
    }
  }
</script>

<style lang="scss" scoped></style>
